

<template>
  <input type="text"  v-model="info">{{info}}
  <hr>
  <h3>个人信息</h3>
  <input type="text" placeholder="请输入用户名"  v-model="information.username">
  <input type="password" placeholder="请输入密码"  v-model="information.password">
  <br>
  <input type="radio" name="gander" value="0"  v-model="information.gender">公
  <input type="radio" name="gander" value="1"  v-model="information.gender">母
  <button @click="login">登录</button>
  <hr>
  <table border="1px">
    <tr>
      <th >{{information.username}}</th>
      <th >{{information.password}}></th>
      <th>{{information.gender}}</th>
    </tr>


  </table>
</template>

<script setup>

import {ref} from "vue";

const info = ref('哈哈哈');

//使用对象的属性来保存值
const information = ref({
  username:"",
  password:"",
  gender:""
});

function login(){
  console.log(information.value)
}

</script>

<style scoped>

</style>